<template>
	<view class="setting px-32 mt-32">
		<fui-form :model="form" ref="uForm">
			<fui-form-item label="商家名称" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.name" :padding="[0, '32rpx']" placeholder="请输入商家名称" :borderBottom="false" textAlign="right" border="none" />
			</fui-form-item>
			<fui-form-item label="商户省市" labelSize="28" :labelWidth="160">
				<view class="flex items-center justify-end" @click="show = true">
					<view class="text-right font-32 font-bold">{{ cityText }}</view>
					<fui-icon name="arrowright" size="28"></fui-icon>
				</view>
			</fui-form-item>
			<fui-form-item label="商户地址" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.address" :padding="[0, '32rpx']" placeholder="请输入详情地址" :borderBottom="false" textAlign="right"
					border="none" />
			</fui-form-item>
			<fui-form-item label="商户电话" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.phoneNumber" :padding="[0, '32rpx']" placeholder="请输入商家电话" :borderBottom="false" textAlign="right"
					border="none" />
			</fui-form-item>
			<fui-form-item label="房间数量" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.hnumber" :padding="[0, '32rpx']" :borderBottom="false" placeholder="请输入房间数量" textAlign="right"
					border="none" />
			</fui-form-item>
			<!-- <fui-form-item label="推广码" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.numberCode" :padding="[0, '32rpx']" :borderBottom="false" textAlign="right"
					border="none" />
			</fui-form-item> -->
			<!-- <fui-form-item label="商家类型" labelSize="28" :labelWidth="160">
				<view class="fui-flex justify-end w-full">
					<fui-radio-group name="radio" v-model="form.xxx">
						<view class="fui-flex">
							<fui-label>
								<view class="fui-align__center">
									<fui-radio value="1"></fui-radio>
									<text class="fui-text ml-8">个体</text>
								</view>
							</fui-label>
							<fui-label :margin="['0','0','0','40rpx']">
								<view class="fui-align__center">
									<fui-radio value="2"></fui-radio>
									<text class="fui-text ml-8">企业</text>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</view>
			</fui-form-item> -->
			<!-- <fui-form-item label="联系人" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.name" :padding="[0, '32rpx']" :borderBottom="false" textAlign="right" border="none" />
			</fui-form-item>
			<fui-form-item label="联系电话" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.name" :padding="[0, '32rpx']" :borderBottom="false" textAlign="right" border="none" type="number" />
			</fui-form-item>
			<fui-form-item label="推手信息" labelSize="28" :labelWidth="160">
				<fui-input v-model="form.name" :padding="[0, '32rpx']" :borderBottom="false" textAlign="right" border="none" />
			</fui-form-item>
			<fui-form-item label="推广码编号" labelSize="28" :labelWidth="200">
				<fui-input v-model="form.name" :padding="[0, '32rpx']" :borderBottom="false" textAlign="right" border="none" />
			</fui-form-item> -->
			<fui-form-item label="图片认证" labelSize="28" :sourceType="['camera']" :labelWidth="160">
				<view class="fui-flex justify-end w-full">
					<fui-upload width='160' height="160" :url="action" :max="5" ref="uUpload" @success="onSuccess"
						@delete="onRemove" immediate :fileList="fileList"></fui-upload>
				</view>
			</fui-form-item>
		</fui-form>
		<!-- <view class="" @click="chooseAddressClick()">
			定位获取
		</view> -->
		<fui-picker :options="options" layer="2" linkage :show="show" @change="change" @cancel="cancel"></fui-picker>
		<view class="address">
			<fui-button shape="square" type="success" @click="clickSubmit">提交审核</fui-button>
		</view>
	</view>
</template>

<script>
	import {
		UP_URL
	} from '@/env.js'
	import Apis from '@/common/fui-apis.js'
	export default {
		data() {
			return {
				show: false,
				form: {
					cityId: '',
					provinceId: '',
				},
				fileList: [],
				action: UP_URL,
				shopImage: [],
				// 省市列表
				options: [],
				province: '',
				city: ''
			};
		},
		onLoad() {
			// this.userInfo = uni.getStorageSync('userInfo')
			// if(uni.getStorageSync('userInfo')) this.getClient();
			this.getCityTree();
		},
		computed:{
			cityText(){
				let text = '请选择省市'
				if(this.province != '' && this.city != '') return text = this.province + '-' + this.city;
				return text;
			}
		},
		methods: {
			// 获取省列表
			async getCityTree(){
				const data = await Apis.getCityTree();
				this.options = data.data;
				console.log(this.options);
			},
			change(e) {
				this.province = e.text[0];
				this.form.provinceId = e.value[0];
				this.city = e.text[1];
				this.form.cityId = e.value[1];
				this.show = false;
			},
			cancel(e) {
				this.show = false;
			},
			onSuccess(e) {
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}");
				// this.status = e.status
				console.log(res);
				if (res.data) {
					this.shopImage.push(res.data);
					this.$refs.upload.result(res.data, e.index)
				}
			},
			onRemove(index) {
				this.shopImage.splice(index, 1);
			},
			// 
			chooseAddressClick() {
				console.log(111);
				uni.chooseLocation({
					success(res) {
						console.log(res);
					}
				})
			},
			// 提交审核
			clickSubmit() {
				if (!this.form.name) return this.$t.tip('请输入商家名称');
				if (!this.form.phoneNumber) return this.$t.tip('请输入商户电话');
				if (this.shopImage.length < 2) return this.$t.tip('请至少拍摄三张照片');
				Apis.addShop({
					...this.form,
					shopImage: this.shopImage
				}).then(res => {
					if (res.code == 200) {
						this.$t.tip('录入成功')
					}
					setTimeout(() => {
						uni.navigateBack()
					}, 1200)
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address {
		margin-top: 20rpx;

	}

	.u-upload__wrap {
		justify-content: flex-end !important;
	}
</style>